<template>
  <div class="main-container">
    <div class="page-header">
      <h1 class="page-title">分销客户一览表</h1>
    </div>

    <div class="stats-container">
      <!-- <div class="filter-bar">
        <a-range-picker />
        <a-button type="primary" @click="fetchData">查询</a-button>
      </div>-->

      <div class="stats-grid">
        <!-- 在合作客户数 -->
        <div class="stats-card stats-card-blue">
          <!-- <div class="card-actions">
            <a-button type="link" icon="bar-chart" size="small"></a-button>
          </div>-->
          <div class="stats-card-title">在合作客户数</div>
          <div class="stats-card-value">{{ stats.cooperatingCustomers }}</div>
          <div class="stats-card-footer">在合作客户数</div>
        </div>

        <!-- 跟进客户数 -->
        <div class="stats-card stats-card-blue">
          <div class="stats-card-title">跟进客户数</div>
          <div class="stats-card-value">{{ stats.followingCustomers }}</div>
          <div class="stats-card-footer">跟进客户</div>
        </div>
        <!-- 停止合作客户数 -->
        <div class="stats-card stats-card-blue">
          <div class="stats-card-title">停止合作客户数</div>
          <div class="stats-card-value">{{ stats.stoppedCustomers }}</div>
          <div class="stats-card-footer">停止合作客户数</div>
        </div>

        <!-- 成交总金额 -->
        <div class="stats-card stats-card-purple">
          <div class="stats-card-title">成交总金额</div>
          <div class="stats-card-value">¥{{ stats.totalDealAmount }}</div>
          <div class="stats-card-footer">成交总金额</div>
        </div>

        <!-- 本周成交金额 -->
        <div class="stats-card stats-card-purple">
          <div class="stats-card-title">本周成交金额</div>
          <div class="stats-card-value">¥{{ stats.weeklyDealAmount }}</div>
          <div class="stats-card-footer">本周成交金额</div>
        </div>

        <!-- 本周新增客户数 -->
        <div class="stats-card stats-card-purple">
          <div class="stats-card-title">本周新增客户数</div>
          <div class="stats-card-value">{{ stats.weeklyNewCustomers }}</div>
          <div class="stats-card-footer">本周新增客户数</div>
        </div>

        <!-- 本周新签合同 -->
        <div class="stats-card stats-card-blue">
          <div class="stats-card-title">本周新签合同</div>
          <div class="stats-card-value">{{ stats.weeklyContracts }}</div>
          <div class="stats-card-footer">本周新签合同</div>
        </div>

        <!-- 本周新签合同额 -->
        <div class="stats-card stats-card-blue">
          <div class="stats-card-title">本周新签合同额</div>
          <div class="stats-card-value">¥{{ stats.weeklyContractAmount }}</div>
          <div class="stats-card-footer">本周新签合同额</div>
        </div>
        <!-- 近一个月总销售趋势 -->
        <div class="chart-card">
          <div class="chart-title">近一个月总销售趋势图</div>
          <div class="chart-container" ref="salesChart"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted } from 'vue'
import { Button, DatePicker } from 'ant-design-vue'
import * as echarts from 'echarts'
import { defHttp } from '/@/utils/http/axios';

export default {
  name: 'DistributionDashboard',
  components: {
    'a-button': Button,
    'a-range-picker': DatePicker.RangePicker
  },
  setup () {
    const stats = ref({
      followUpCount: 0,
      totalAmount: 0,
      weeklyContractAmount: 0,
      weeklyNewCustomers: 0,
      salesOpportunities: 0,
      contractHighlights: 0
    })

    const salesChart = ref(null)
    let chartInstance = null

    // 获取数据
    const fetchData = async () => {
      try {
        const data = await defHttp.get({ url: "/fenxiao/fSalesOrderStatistics/statistics" });
        stats.value = data;

        // 假设后端返回排行榜数据结构 { names:[], values:[] }
        if (data.monthlySalesTrend) {
          initChart(data.monthlySalesTrend)
        }
      } catch (e) {
        console.error("获取统计数据失败:", e);
      }
    }

    const initChart = (chartData) => {
      if (!salesChart.value) return;
      if (!chartInstance) {
        chartInstance = echarts.init(salesChart.value);
        console.log(chartData)
      }

      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line',
            lineStyle: { color: '#91d5ff', width: 2 }
          },
          backgroundColor: 'rgba(0,0,0,0.7)',
          textStyle: { color: '#fff' }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: chartData.dates,
          axisLine: { lineStyle: { color: '#d9d9d9' } },
          axisTick: { show: false },
          axisLabel: { color: '#595959' }
        },
        yAxis: {
          type: 'value',
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { lineStyle: { type: 'dashed', color: '#f0f0f0' } },
          axisLabel: { color: '#595959', formatter: '¥{value}' }
        },
        series: [{
          data: chartData.values.map(v => parseFloat(v.toFixed(2))),
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: { width: 3, color: '#1890ff' },
          itemStyle: { color: '#1890ff', borderColor: '#fff', borderWidth: 2 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(24,144,255,0.3)' },
              { offset: 1, color: 'rgba(24,144,255,0)' }
            ])
          }
        }]
      };

      chartInstance.setOption(option);
    }

    const handleResize = () => {
      if (chartInstance) chartInstance.resize()
    }

    onMounted(() => {
      fetchData()
      window.addEventListener('resize', handleResize)
    })

    onUnmounted(() => {
      if (chartInstance) {
        chartInstance.dispose()
        chartInstance = null
      }
      window.removeEventListener('resize', handleResize)
    })

    return {
      stats,
      salesChart,
      fetchData
    }
  }
}
</script>

<style scoped>
.main-container {
  padding: 24px;
  background-color: #f0f2f5;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  background: #fff;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  margin: 0;
}

.stats-container {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.stats-card {
  border-radius: 8px;
  padding: 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.stats-card-blue {
  background-color: #f0f7ff;
  border: 1px solid #91d5ff;
}
.stats-card-purple {
  background-color: #f9f0ff;
  border: 1px solid #d3adf7;
}
.stats-card-red {
  background-color: #fff2f0;
  border: 1px solid #ffccc7;
}

.stats-card-title {
  font-size: 16px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.85);
  text-align: left;
  margin-bottom: 16px;
}

.stats-card-value {
  font-size: 32px;
  font-weight: 700;
  text-align: center;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-card-footer {
  font-size: 20px;
  color: rgba(0, 0, 0, 0.45);
  text-align: center;
  margin-top: 8px;
}

.chart-card {
  grid-column: span 3;
  border-radius: 8px;
  padding: 24px;
  border: 1px solid #f0f0f0;
}

.chart-title {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
}

.chart-container {
  height: 300px;
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  .chart-card {
    grid-column: span 1;
  }
}
</style>
